import { useState } from 'react';

const WorkCard = ({ work }) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div 
      className="block group"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 h-full flex flex-col">
        {/* 作品封面 */}
        <div className="relative overflow-hidden h-48">
          <img 
            src={work.coverUrl} 
            alt={work.title}
            className={`w-full h-full object-cover transition-transform duration-500 ${isHovered ? 'scale-110' : 'scale-100'}`}
          />
        </div>
        
        {/* 作品信息 */}
        <div className="p-4 flex-grow flex flex-col">
          <div className="flex justify-between items-start mb-2">
            <h3 className="font-semibold text-lg line-clamp-1 flex-1">{work.title}</h3>
            {work.category && (
              <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded-full ml-2 whitespace-nowrap">
                {work.category}
              </span>
            )}
          </div>
          
          <p className="text-gray-600 dark:text-gray-400 text-sm mb-2">创作者: {work.creator}</p>
          <p className="text-gray-500 dark:text-gray-500 text-sm flex-grow line-clamp-2 mb-3">{work.description}</p>
          
          {/* 标签 */}
          {work.tags && work.tags.length > 0 && (
            <div className="flex flex-wrap gap-1">
              {work.tags.slice(0, 4).map((tag, index) => (
                <span 
                  key={index} 
                  className="text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-2 py-0.5 rounded-full"
                >
                  {tag}
                </span>
              ))}
              {work.tags.length > 4 && (
                <span className="text-xs text-gray-500 dark:text-gray-400 px-2 py-0.5">
                  +{work.tags.length - 4}
                </span>
              )}
            </div>
          )}
          
          {/* 操作按钮 */}
          <div className="mt-3 flex gap-2">
            <a 
              href={work.url} 
              target="_blank" 
              rel="noopener noreferrer"
              className="flex-1 bg-blue-600 text-white text-center py-2 px-3 rounded text-sm hover:bg-blue-700 transition-colors"
              onClick={(e) => e.stopPropagation()}
            >
              查看作品
            </a>
            {work.sourceUrl && (
              <a 
                href={work.sourceUrl} 
                target="_blank" 
                rel="noopener noreferrer"
                className="flex-1 bg-green-600 text-white text-center py-2 px-3 rounded text-sm hover:bg-green-700 transition-colors"
                onClick={(e) => e.stopPropagation()}
              >
                查看源码
              </a>
            )}
          </div>

          {/* 创建时间 */}
          {work.createdAt && (
            <div className="mt-2 pt-2 border-t border-gray-100 dark:border-gray-700">
              <p className="text-xs text-gray-400 dark:text-gray-500">
                {new Date(work.createdAt).toLocaleDateString('zh-CN')}
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default WorkCard;
